<template>
    <ActivityPhonePreview is-poster>
        <div class="poster_right_box">
            <div
                class="content"
                :style="`background-image: url(${props.absolute_url || (props.isLuckDraw ? defaultAbsoluteUrl : '')})`">
                <div
                    v-if="props.poster_head_switch == 1"
                    class="avatar_box"
                    style="border-radius: 50%"
                    :style="{
                        top: formData.position.avatarY + 'px',
                        left: formData.position.avatarX + 'px'
                    }"
                    @mouseover="onAvatar">
                    <div v-if="props.poster_head == 1" :style="{ borderRadius: '50%' }" class="avatar"></div>
                    <div v-else :style="{ borderRadius: '0%' }" class="avatar"></div>
                </div>
                <div
                    class="nickname_box"
                    :style="{
                        top: formData.position.nicknameY + 'px',
                        left: formData.position.nicknameX + 'px'
                    }"
                    @mouseover="onNickname">
                    <span
                        v-if="props.poster_nickname_switch == 1"
                        :style="{
                            color: props.poster_nickname_color,
                            fontSize: props.poster_nickname_size + 'px'
                        }">
                        这里是分享人昵称
                    </span>
                </div>
                <div
                    class="qrcode_box"
                    :style="{
                        top: formData.position.qrcodeY + 'px',
                        left: formData.position.qrcodeX + 'px'
                    }"
                    @mouseover="onQrcode">
                    <div class="qrcode"></div>
                </div>
                <div
                    class="desc_box"
                    :style="{
                        top: formData.position.descY + 'px',
                        left: formData.position.descX + 'px'
                    }"
                    @mouseover="onDesc">
                    <span
                        v-if="props.poster_desc_switch == 1"
                        class="desc_text"
                        :style="{
                            color: props.poster_desc_color,
                            fontSize: props.poster_desc_size + 'px'
                        }">
                        <span
                            v-html="props.poster_desc_content ? fixText(props.poster_desc_content) : '这里是显示描述'">
                        </span>
                    </span>
                </div>
            </div>
        </div>
    </ActivityPhonePreview>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue';
import ActivityPhonePreview from '../index.vue';

const props = defineProps({
    isLuckDraw: {
        type: Boolean,
        default: false
    },
    absolute_url: {
        type: String,
        default: ''
    },
    poster_head: {
        type: [String, Number],
        default: 1
    },
    poster_head_switch: {
        type: [String, Number],
        default: 1
    },
    poster_nickname_color: {
        type: String,
        default: '#fff'
    },
    poster_nickname_size: {
        type: [String, Number],
        default: 14
    },
    poster_nickname_switch: {
        type: [String, Number],
        default: 1
    },
    poster_desc_switch: {
        type: [String, Number],
        default: 1
    },
    poster_desc_color: {
        type: String,
        default: '#fff'
    },
    poster_desc_size: {
        type: String,
        default: '#fff'
    },
    poster_desc_content: {
        type: String,
        default: ''
    }
});

const defaultAbsoluteUrl = 'https://static.scrm.keyid.cn/assets/images/lottery/haibao.png';

const formData = ref({
    position: {
        avatarX: 15,
        avatarY: 530,
        nicknameX: 75,
        nicknameY: 536,
        qrcodeX: 270,
        qrcodeY: 500,
        descX: 75,
        descY: 558
    }
});

const fixText = (text: string) => {
    const replaceRegex = /(\n\r|\r\n|\r|\n)/g;
    text = text || '';
    return text.replace(replaceRegex, '<br/>');
};

const onAvatar = () => {
    DragBox(document.querySelector('.avatar_box'), 'avatar');
};
const onNickname = () => {
    DragBox(document.querySelector('.nickname_box'), 'nickname');
};
const onQrcode = () => {
    DragBox(document.querySelector('.qrcode_box'), 'qrcode');
};
const onDesc = () => {
    DragBox(document.querySelector('.desc_box'), 'desc');
};

const DragBox = (elment: any, str: any) => {
    // 获取鼠标在页面上的坐标
    function getPage(e) {
        return {
            pageX: e.clientX + getScroll().scrollLeft,
            pageY: e.clientY + getScroll().scrollTop
        };
    }
    function getScroll() {
        return {
            scrollTop: document.documentElement.scrollTop || document.body.scrollTop,
            scrollLeft: document.documentElement.scrollLeft || document.body.scrollLeft
        };
    }

    elment.onmousedown = function (e: any) {
        const x = getPage(e).pageX - elment.offsetLeft;
        const y = getPage(e).pageY - elment.offsetTop;
        document.onmousemove = function (e) {
            let elmentX = getPage(e).pageX - x;
            let elmentY = getPage(e).pageY - y;
            if (elmentX < 0) {
                elmentX = 0;
            }
            if (elmentY < 0) {
                elmentY = 0;
            }
            if (elmentX > window.innerWidth - elment.offsetWidth) {
                elmentX = window.innerWidth - elment.offsetWidth;
            }
            if (elmentY > window.innerHeight - elment.offsetHeight) {
                elmentY = window.innerHeight - elment.offsetHeight;
            }
            if (elmentX > 375 - elment.offsetWidth) {
                elmentX = 375 - elment.offsetWidth;
            }
            if (elmentY > 667 - elment.offsetHeight) {
                elmentY = 667 - elment.offsetHeight;
            }
            if (str === 'avatar') {
                formData.value.position.avatarX = elmentX;
                formData.value.position.avatarY = elmentY;
            }
            if (str === 'nickname') {
                formData.value.position.nicknameX = elmentX;
                formData.value.position.nicknameY = elmentY;
            }
            if (str === 'qrcode') {
                formData.value.position.qrcodeX = elmentX;
                formData.value.position.qrcodeY = elmentY;
            }
            if (str === 'desc') {
                formData.value.position.descX = elmentX;
                formData.value.position.descY = elmentY;
            }
        };
    };
};
//当鼠标弹起的时候，移除 move 事件
document.onmouseup = function () {
    document.onmousemove = null;
};

defineExpose({
    formData
});
</script>
<style lang="scss" scoped>
.poster_right_box {
    height: 667px;
    background-color: #f3fafb;
    .content {
        position: relative;
        width: 100%;
        height: 100%;
        background-color: transparent;
        background-size: cover;
        background-repeat: no-repeat;
        // background-position: center;

        .avatar_box {
            width: 50px;
            height: 50px;
            position: absolute;
            top: 572px;
            left: 17px;
            cursor: move;
            .avatar {
                width: 100%;
                height: 100%;
                background: url('@/assets/smartMarketing/nomal_avatar.png');
                background-size: cover;
            }
        }

        .nickname_box {
            position: absolute;
            top: 588px;
            left: 77px;
            cursor: move;
        }

        .desc_box {
            position: absolute;
            left: 75px;
            top: 593px;
            z-index: 3;
            cursor: move;

            .desc_text {
                max-width: 180px;
                word-break: break-word;
                display: block;
                font-size: 14px;
            }
        }

        .qrcode_box {
            position: absolute;
            left: 265px;
            top: 550px;
            z-index: 4;
            cursor: move;
            width: 90px;
            height: 90px;

            .qrcode {
                width: 100%;
                height: 100%;
                background: url('@/assets/phonePreview/activityPhonePreview/posterPhone/qrcode.png');
                background-size: 100%;
            }
        }
    }
}
</style>
